<template>
  <el-container class="group-tag-container">
    <div class="groups">
      <!-- 分组 -->
      <draggable v-model="groupList" item-key="id" handle=".item" @end="handleGroupDragEnd"
        v-if="groupList.length != 0">
        <template #item="{ element }">
          <div class="text-color" :class="['item', element.id == currentGroup.id ? 'active' : '']"
            @contextmenu.prevent="(e) => handleContextMenu(e, element)" @click="handleTagFilter(element)">
            <div class="icon">
              <el-icon :size="iconSize">
                <Menu />
              </el-icon>
            </div>
            <div class="name">{{ element.name }}</div>
          </div>
        </template>
      </draggable>
      <div class="text-color item" @click="addForm">
        <div class="icon">
          <el-icon :size="iconSize">
            <Plus />
          </el-icon>
        </div>
        <div class="name">添加</div>
      </div>
      <div class="text-color item" @click="exportForm">
        <div class="icon">
          <el-icon :size="iconSize">
            <Download />
          </el-icon>
        </div>
        <div class="name">导出数据</div>
      </div>
      <div class="text-color item" @click="importForm">
        <div class="icon">
          <el-icon :size="iconSize">
            <Upload />
          </el-icon>
        </div>
        <div class="name">导入数据</div>
      </div>
      <right-click-menu v-model="currentContextMenu" :data="rightClickMenuList" />
      <!-- 分组新增/修改菜单 -->
      <el-dialog v-model="dialogGroupVisible" :title="dialogGroupTitle" width="500" draggable overflow
        @close="cancelForm" append-to-body>
        <el-form ref="formRef" :model="form" label-width="auto">
          <el-form-item label="分组名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="cancelForm">取消</el-button>
            <el-button type="primary" @click="submitForm">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="tags">
      <Tag v-model="currentGroup" @change="sendGroup" />
    </div>
  </el-container>
</template>

<script setup>
import draggable from 'vuedraggable'
import { v4 as uuidv4 } from 'uuid'
import { importJson, exportJson } from '@/utils/exportImport'
import { listGroup, saveGroup } from "@/api/group"
import Tag from "./tag/index.vue"
import { ElMessage } from 'element-plus'

//===============================================================================================================================
// 分组
//===============================================================================================================================
// 分组新增/修改相关状态
const groupList = ref([])
const currentGroup = ref()
const iconSize = ref(20)
const form = ref({ tags: [] })
const dialogGroupTitle = ref("")
const dialogGroupVisible = ref(false)

const getGroupList = () => {
  listGroup().then(res => {
    groupList.value = res
    if(!currentGroup.value) currentGroup.value = groupList.value[0]
  })
}

const addForm = () => {
  dialogGroupTitle.value = "添加分组"
  dialogGroupVisible.value = true
}
const cancelForm = () => {
  dialogGroupVisible.value = false
  form.value = {}
}
const submitForm = () => {
  if (!form.value.id) {
    form.value.id = uuidv4().replaceAll('-', '')
    form.value.tags = []
    groupList.value.push(form.value)
  }
  sendGroup()
  cancelForm()
}
const editGroup = (row) => {
  dialogGroupTitle.value = "编辑分组"
  dialogGroupVisible.value = true
  form.value = row
}
const delGroup = (row) => {
  groupList.value = groupList.value.filter(i => i.id != row.id)
  sendGroup()
}
const sendGroup = async () => {
  saveGroup(groupList.value)
  getGroupList()
}
const handleTagFilter = (row) => {
  currentGroup.value = row
}

const exportForm = () => {
  exportJson(groupList.value, 'data.json');
}

const importForm = () => {
  importJson((data) => {
    for (const i of data) {
      if (i.id === undefined || i.name === undefined || i.tags === undefined) throw new Error()
      for (const j of i.tags) {
        if (j.id === undefined || j.name === undefined || j.url === undefined) throw new Error()
        saveGroup(data)
        getGroupList()
      }
    }
  })
}

// 拖拽排序处理
const handleGroupDragEnd = async () => {
  sendGroup()
  ElMessage.success('标签顺序已更新')
}

//右键菜单状态数据
const rightClickMenuList = ref([
  { action: editGroup, actionName: '编辑', icon: 'Edit' },
  { action: delGroup, actionName: '删除', icon: 'Delete' },
])
const currentContextMenu = ref({})

// 右键事件处理
const handleContextMenu = (event, obj) => {
  event.preventDefault()
  currentContextMenu.value = {
    data: obj,
    x: event.clientX,
    y: event.clientY,
    show: true
  }
}

getGroupList()
</script>

<style scoped lang="scss">
.group-tag-container {
  height: 400px;
}

.text-color {
  color: var(--lan-main-font-color);
}

.groups {
  display: inline-block;
  width: 70px;
  border-radius: 8px;
  text-align: center;
  vertical-align: top;
  //隐藏滚动条
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */

  .item {
    background-color: #f5f7fa99;
    border-radius: 8px;
    padding: 5px;
    height: 50px;
    padding-top: 14px;

    .name {
      font-size: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 确保文本正常换行 */
      white-space: normal;
    }
  }

  .active {
    color: var(--el-color-primary);
  }

  .item:hover {
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
}

//隐藏滚动条
.groups::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.tags {
  display: inline-block;
  width: 800px;
  text-align: left;
  margin-left: 20px;
  // border: 1px solid #ccc;
  border-radius: 8px;
  vertical-align: top;
  //隐藏滚动条
  overflow-y: auto;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

//隐藏滚动条
.tags::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}
</style>